// Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import Logger from './Logger';
import Util from './Util';
import {CLOUD_PHONE_RATIO} from './config/commonConfig';

const FULLSCREEN_CHANGE = ['webkitfullscreenchange', 'mozfullscreenchange', 'fullscreenchange', 'msFullscreenChange'];

export default class FullScreen {
    constructor(options) {
        this.options = {...options};
        this.inFullscreenStatus = false;
        this.playerContainerId = null;
        this.fullscreenElementId = null;
        this.fullscreenEle = null;
        this.util = new Util();
    }

    init() {
        FULLSCREEN_CHANGE.forEach(evt => {
            this.util.bind(document, evt, this.refreshFullState.bind(this));
        });
    }

    enterFullCreen() {
        Logger.debug('enterFullCreen');
        if (!this.fullscreenEle) {
            return;
        }
        
        const requestMethod = this.fullscreenEle.requestFullScreen // W3C
        || this.fullscreenEle.mozRequestFullScreen // Chrome 等
        || this.fullscreenEle.webkitRequestFullScreen // FireFox
        || this.fullscreenEle.msRequestFullScreen; // IE11
        if (requestMethod) {
            requestMethod.call(this.fullscreenEle);
        }
    }
        
    exitFullscreen() {
        Logger.debug('exitFullscreen');
        if (!this.fullscreenEle) {
            return;
        }

        const exitMethod = document.exitFullscreen // W3C
        || document.mozCancelFullScreen // FireFox
        || document.webkitExitFullscreen // Chrome 等
        || document.msExitFullscreen; // IE11
        if (exitMethod) {
            exitMethod.call(document);
        }
    }

    refreshFullState() {
        if (!this.fullscreenEle) {
            return;
        }

        this.inFullscreenStatus = Boolean(document.fullscreenElement
            || document.msFullscreenElement
            || document.mozFullScreenElement
            || document.webkitFullscreenElement);
        Logger.debug('inFullscreenStatus = ', this.inFullscreenStatus);

        // 按下F11键进入全屏或退出全屏，不会触发resize事件，强制触发，否则触控点错位
        window.dispatchEvent && window.dispatchEvent(new Event('resize'));

        setTimeout(() => {
            this.updateContainerSize();
        }, 120);
    }

    fullscreenToggle(fullscreenElementId, playerContainerId, isMSE) {
        this.playerContainerId = playerContainerId;
        this.fullscreenElementId = fullscreenElementId;
        this.isMSE = isMSE;

        if (!fullscreenElementId && this.options.autoRotate) {
            Logger.debug('Can not use fullscreenToggle API success, because fullscreenElementId is undefined but auto_rotate is true');
            return;
        }

        Logger.debug('toggle: inFullscreenStatus = ', this.inFullscreenStatus);
        this.fullscreenEle = document.getElementById(fullscreenElementId || this.options.containerId);
        if (this.inFullscreenStatus) {
            this.exitFullscreen();
        } else {
            this.enterFullCreen();
        }
    }

    isFullscreen() {
        return this.inFullscreenStatus;
    }

    destroy() {
        FULLSCREEN_CHANGE.forEach(evt => {
            this.util.unbind(document, evt);
        });
    }

    updateCanvasSize(clientWidth, clientHeight) {
        const playContainer = document.getElementById(`${this.playerContainerId}`);
        let canvasElement = playContainer.shadowRoot.querySelector('#playCanvas');
        let playerWidth = clientHeight * CLOUD_PHONE_RATIO;
        let playerHeight = clientHeight;
        if (this.options.isMobile) {
            playerWidth = clientWidth;
            playerHeight = clientHeight;
        }
        
        canvasElement.style.width = playerWidth + 'px';
        canvasElement.style.height = playerHeight + 'px';
    }

    updateContainerSize() {
        const fullWidth = window.innerWidth;
        const fullHeight = window.innerHeight;
        const containerEle = document.getElementById('container');
        containerEle.style.cssText = `
            width: ${fullWidth};
            height: ${fullHeight};
        `;

        // canvas无法使用百分比设置大小，故全屏和取消全屏需要手动设置宽高
        if (!this.isMSE) {
            this.updateCanvasSize(fullWidth, fullHeight);
        }
    }
}
